<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示模式</title>
		<style>
			.box{
				width:300px;
				height:300px;
				border:1px solid red;
				background-color:aqua;
			}
		</style>
	</head>
	<body>
		<!-- 元素的显示模式：
		1.块元素 block
			比较霸道，单独占一行
			默认情况宽度和父级元素一样宽
			可以给元素设置宽，高和水平居中
			块元素中可以包含内元素与块元素
		2.行内元素inline
			一行显示多个
			默认宽度和内容填充，内容多宽元素多宽
			宽，高，水平居中属性不适用
			行内元素只能容纳文本或其他元素
			span ，a ，del
		3.行内块元素inlne-block
			一行显示多个
			默认宽度由内容填充，内容多宽元素多宽
			可以给元素设置宽高
			input，img，td
		元素显示模式的转换
			display：转换后的显示模式
			display：block；转换为块元素 
			-->
		<div>
			<img src=""/>
			<h3>hello</h3>
			<p class="box">mi</p>
			<span class="box">1999</span>
			<span>2999</span>
			<p></p>
			<a href="#">这是链接</a>
		</div>
	</body>
</html>